<style scoped lang="scss">
.ListMap-header {
  display:flex;
  justify-content: flex-start;
  align-items: center;
  height:32px;
}
.ListMap-mark {
  width:5px;
  height:32px;
  background-color: gray;
  border-color: #2d8cf0;
  margin-right:2px;
}
.ListMap-newItem-title {
  display: flex;
  width:100%;
  height:100%;
  padding-left: 28px;
  justify-content: space-between;
  align-items: center;
  background-color: #f7f7f7;
  border-radius: 2px;
  //background-color: #f7f7f7;
  border: 1px solid #dcdee2;
}
.ListMap-action {
   width:20px;
   margin-left: 5px;
   margin-right: 5px;
   cursor: pointer;
 }
</style>
<template>
  <div class="ListMap-header">
    <div class="ListMap-mark"></div>
    <div class="ListMap-newItem-title">
      <slot><span :style="titleStyle">{{ newMap }}</span></slot>
      <div class="ListMap-action" @click="$emit('add')">+</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "starTemplateNewField",
  props:{
    newMap:{
      default: () => {
        return '';
      }
    },
    titleStyle:{
      default:()=>{
        return {};
      }
    },
  }
}
</script>
